<script setup lang="ts">
  import { useLocale } from '@/locales/useLocale';

  const { t } = useLocale();
</script>

<template>
  <div
    class="flex-justify-items-center bg-[url(/src/assets/images/404.png)] bg-cover bg-center"
    style="height: calc(100vh - 60px)"
  >
    <div class="w-1/2 xl:w-[35%] mb-24 xl:mb-36 select-none text-center">
      <img src="/src/assets/images/404-1.svg" alt="404" />
      <h1 class="text-sm py-2 lg:py-0 lg:text-3xl font-bold text-main-text">
        {{ t('message.sys.exception.subTitle404') }}
      </h1>
    </div>
  </div>
</template>

<style lang="scss"></style>
